<template>
  <footer class="footer" v-if="list.length > 0">
    <span class="todo-count">
      <strong>{{ leftCount }}</strong> item left
    </span>
    <ul class="filters">
      <li>
        <a
          @click.prevent="changeType('all')"
          :class="{ selected: type === 'all' }"
          href="#/"
          >All</a
        >
      </li>
      <li>
        <a
          @click.prevent="changeType('active')"
          :class="{ selected: type === 'active' }"
          href="#/active"
          >Active</a
        >
      </li>
      <li>
        <a
          @click.prevent="changeType('completed')"
          :class="{ selected: type === 'completed' }"
          href="#/completed"
        >
          Completed
        </a>
      </li>
    </ul>
    <button class="clear-completed" v-show="isShowClear" @click="clear">
      Clear completed
    </button>
  </footer>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState(['list', 'type']),
    ...mapGetters(['leftCount', 'isShowClear']),
  },
  methods: {
    changeType(type) {
      this.$store.commit('changeType', type)
    },
    clear() {
      this.$store.dispatch('clear')
    },
  },
}
</script>

<style></style>
